var leftData = {
  title: "中国区设备分布",
  xAxis: ['北京', '广州', '上海', '江苏', '深圳'],
  data: [
    {
      title: "二碳箱",
      data: [780, 800, 900, 456, 500],
    },
    {
      title: "安全柜",
      data: [781, 801, 901, 457, 501],
    },

    {
      title: "低温冰箱",
      data: [100, 400, 200, 410, 320],
    },
    {
      title: "冷藏箱",
      data: [783, 803, 903, 459, 503],
    },
    {
      title: "液氮罐",
      data: [314, 150, 243, 301, 504],
    },
    {
      title: "摇床",
      data: [123, 210, 130, 241, 250],
    },
    {
      title: "IFA",
      data: [82, 60, 92, 85, 68],
    },
  ],
};


var rightData = {
  title: "告警设备监控",
  xAxis: ['北京', '广州', '上海', '江苏', '深圳'],
  data: [
    {
      title: "二碳箱",
      data: [780, 800, 900, 456, 500],
    },
    {
      title: "安全柜",
      data: [781, 801, 901, 457, 501],
    },

    {
      title: "低温冰箱",
      data: [100, 400, 200, 410, 320],
    },
    {
      title: "冷藏箱",
      data: [783, 803, 903, 459, 503],
    },
    {
      title: "液氮罐",
      data: [314, 150, 243, 301, 504],
    },
    {
      title: "摇床",
      data: [123, 210, 130, 241, 250],
    },
    {
      title: "IFA",
      data: [82, 60, 92, 85, 68],
    },
  ],
};

function barCharts(id, chartdata) {
  const chartDom = document.getElementById(`${id}`);
  const myChart = echarts.init(chartDom);


  const series = chartdata.data.map(({ data, title }) => {
    return {
      type: "bar",
      data,
      coordinateSystem: "polar",
      name: title,
      stack: "a"
    }
  })

  const option = {
    color: ["#018cee", "#89a0e7", "#AF89D6", '#5045f6', '#FF999A', '#4777f5', '#00EAFF', '#44aff0', '#45dbf7', "#ff4343", '#86D560', '#AF89D6'],
    angleAxis: {

      type: "category",
      data: chartdata.xAxis,
      z: 0,
      boundaryGap: false,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#00345e",
          type: "solid",
        },
      },
      yAxis: {
        show: false,
      },
      axisLine: {
        show: false,
        symbol: 'none',
        lineStyle: {
          color: "#ccc",
          type: "solid",
        },
      },
      axisTick: {
        show: false,

      },

    },


    radiusAxis: {
      splitNumber: 3,
      splitLine: {
        show: true,
        lineStyle: {
          color: "#00345e",
          type: "solid",
        },
      },
      axisLabel: {
        show: false,
      },
      minorTick: {
        show: false,
      },
      axisTick: {
        show: false,
      },

    },

    polar: {},
    tooltip: {
      trigger: 'axis',
      padding: 10,
      borderWidth: 1,
    },


    series,
    legend: {
      show: true,
      top: "bottom",
      right: "right",
      data: chartdata.xAxis,
      orient: "vertical",
      textStyle: {
        color: "#ccc",
        fontSize: 10
      },
    },
  };
  option && myChart.setOption(option);
  window.addEventListener("resize", function() {
    myChart.resize();
  });

  let faultByHourIndex = 0;
  let timerFoo = function() {
    myChart.dispatchAction({
      type: 'showTip', // 根据 tooltip 的配置项显示提示框。
      seriesIndex: 0,
      dataIndex: faultByHourIndex
    });
    faultByHourIndex++;

    if (faultByHourIndex >= chartdata.xAxis.length) {
      faultByHourIndex = 0;
    }
  }

  var faultByHourTime = setInterval(timerFoo, 3000)

  window.onunload = function() {
    clearInterval(faultByHourTime)
  }

  myChart.on('mouseover', function(params) {
    clearInterval(faultByHourTime)
  });
  myChart.on('mouseout', function(params) {
    faultByHourIndex = 0
    faultByHourTime = setInterval(timerFoo, 3000)
  })
}
